<!--  -->
<template>
    <view class="ck-container">
        <view class="ck-search">
            <u-search
                shape="round"
                placeholder="请输入产品名称"
                :actionStyle="{ fontSize: '30rpx' }"
                @search="search"
                @custom="search"
            ></u-search>
        </view>
        <view class="ck-title">
            <view class="ck-title-text">
                出库记录（<text style="color: #00bd22">{{ ck_list.length }}</text
                >）
            </view>
        </view>
        <view class="ck-content">
            <view v-for="item in ck_list" class="ck-content-item">
                <view class="ck-content-item-name">
                    <view style="color: #333333; display: flex; align-items: center">
                        <view class="ck-content-item-name-type">{{ item.type }}</view>
                        <view>{{ item.name }}</view>
                    </view>
                    <view>{{ item.displayName }}</view>
                </view>
                <u-line></u-line>
                <view
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 60rpx;
                    "
                >
                    <view>出库量：{{ item.size }}</view>
                    <view>合格率：{{ item.qualified }}%</view>
                </view>

                <view style="margin-bottom: 40rpx">出库时间：{{ item.create_time }}</view>
            </view>
        </view>
    </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import fuzzySearch from "../../utils/search";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            rows: [
                {
                    id: "50",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "1",
                    qualified: "2",
                    operator: "花卉养殖",
                    operatorName: null,
                    create_time: "2024-11-08 13:58:49",
                    io_type: null,
                    displayName: "玫瑰花",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "59",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "1",
                    qualified: "100",
                    operator: "AJWA",
                    operatorName: null,
                    create_time: "2025-02-28 11:19:54",
                    io_type: null,
                    displayName: "玫瑰花",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "61",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "1",
                    qualified: "98%",
                    operator: "AJWA",
                    operatorName: null,
                    create_time: "2025-03-30 12:16:31",
                    io_type: null,
                    displayName: "玫瑰花",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "63",
                    warehouse_id: "94",
                    name: "12",
                    type: "玉米",
                    size: "2",
                    qualified: "12",
                    operator: "AJWA",
                    operatorName: null,
                    create_time: "2025-04-10 10:41:34",
                    io_type: null,
                    displayName: "玫瑰花",
                    io_time: null,
                    typeName: null,
                },
                {
                    id: "64",
                    warehouse_id: "94",
                    name: "大米2",
                    type: "大米",
                    size: "50",
                    qualified: "90",
                    operator: "AJWA",
                    operatorName: null,
                    create_time: "2025-04-18 13:21:53",
                    io_type: null,
                    displayName: "玫瑰花",
                    io_time: null,
                    typeName: null,
                },
            ],
            ck_list: [],
        };
    },
    onLoad(options) {
        this.search("");
    },
    //方法集合
    methods: {
        search(value) {
            this.ck_list = fuzzySearch(value, this.rows, ["name"]);
        },
    },
};
</script>
<style lang="scss" scoped>
.ck-container {
    padding: 0 32rpx 32rpx;

    .ck-search {
        height: 80rpx;
        margin-top: 32rpx;
        display: flex;
        align-items: center;
    }
    .ck-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx 0;
        .ck-title-add {
            padding: 0 40rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background-color: #1296db;
            color: #fff;
            line-height: 60rpx;
        }
        .ck-title-text {
            font-weight: 700;
            color: #555;
            position: relative;
            padding-left: 16rpx;
            &::after {
                content: "";
                position: absolute;
                width: 3px;
                height: 32rpx;
                background-color: #1296db;

                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
    .ck-content {
        border-radius: 24rpx;
        font-size: 28rpx;
        color: #999;
        .ck-content-item {
            padding: 0 40rpx;
            margin-bottom: 40rpx;
            background: #fff;
            overflow: hidden;
            border-radius: 24rpx;
        }
    }
    .ck-content-item-name {
        color: #999;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
        .ck-content-item-name-type {
            font-size: 22rpx;
            line-height: 24rpx;
            padding: 4rpx 8rpx;
            background: #e8f4ee;
            color: #52c68c;
            border: 1rpx solid #52c68c;
            border-radius: 4rpx;
            margin-right: 10rpx;
        }
    }
    .ck-content-item-btn {
        font-weight: 400;
        padding: 6rpx 24rpx;
        font-size: 26rpx;
        background-color: #1296db;
        border-radius: 12rpx;
        color: #fff;
    }
    .form_items {
        .select {
            border: 1rpx solid #e5e5e5;
            height: 70rpx;
            border-radius: 12rpx;
            margin: 30rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24rpx;
            color: #666;
            .jiantou {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
    .form_btn {
        height: 100rpx;
        border-radius: 50rpx;
        background-color: #1296db;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
